<template>
  <div class="search bgImg">
    <div class="body bgc">
      <div class="wenzi">
        <h1>搜索</h1>
        <i class="iconfont icon-xian-xuxian"></i>
        <span>Search</span>
      </div>
      <div class="body-bgc">
        <div class="body-content">
          <el-row class="demo-autocomplete">
            <el-col>
              <h3 class="sub-title">#想要找点什么吗？</h3>
              <el-autocomplete
                  class="inline-input"
                  id="inputId"
                  v-model="state"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search"
                  @select="handleSelect"
                  @keyup.enter.native="enter(state)"
                ></el-autocomplete>
            </el-col>
          </el-row>
          <!-- 搜索结果部分 -->
          <div class="sy-result">
            <span v-show="this.searchRes.length==0">还没有内容，快去搜索看看吧。</span>
            <ul class="syr-ul"   v-show="this.searchRes.length>0">
              <li v-for="ssItem in searchRes" :key="ssItem.data_id"  @click="toDetail(ssItem.data_id)">{{ssItem.title}}</li>
            </ul>
          </div>
          <!-- 其他文章部分 -->
          <div class="sy-other">
            <h3>#没有找到你想要的？快来看看其他的吧。</h3>
            <ol class="syo-ol">
              <li v-for="osItem in otherRes" :key="osItem.data_id" class="" @click="toDetail(osItem.data_id)">{{osItem.title}}</li>
            </ol>
          </div>
          <!-- 留言评论部分 -->
          <div>
            <h3>#给我留言吧</h3>
            <message topicType="搜索" :typeId="0"></message>
          </div>

        </div>
      </div>

    </div>
  </div>
</template>
<script>
import message from '../comments/message.vue'
export default {
  components:{
    message
  },
  data(){
    return {
      restaurants: [],//点击输入框，用来显示历史记录
      state: '',//双向数据绑定输入框中输入的文字
      otherRes:[],//其他文章部分
      searchRes:[]

    }
  },
  mounted() {
    document.getElementById('inputId').focus();
    this.getOtherRes();
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    async getOtherRes(){
      console.log("这里是搜索页面");
      const {data:res} = await this.$http.get('findData');
      // console.log(res);
      if(res.status!=200){
        this.$message.error('获取数据失败');
      }else{
        this.otherRes = res.message;
        console.log(this.otherRes);
      }
    },
    async enter(state){
      console.log("这里是回车搜索");
      this.searchRes = [];
      var obj = {};
      obj.value = state;
      this.restaurants.unshift(obj);
      var keywod = state;
      if(keywod!=""){
        const {data:res} = await this.$http.post("searchKeyword",{keywod});
        // console.log(res);
        if(res.status != 200){
          this.$message.error('查询数据失败');
        }else{
          // console.log(res);
          const arr = res.message;
          if(arr.length==0){
            this.state = "";
          }else{
            // console.log(arr);
            this.searchRes = arr;
          }
        }
      }else{
        this.$message('请输入内容！');
      }
      this.state = "";

    },
    toDetail(id){
      this.$router.push({path:"/details",query:{id}})
    }
  }
}

</script>
<style scoped>
.search {
  /* color:#f4f4f5; */
}
.body-bgc {
  width: 100%;
  background-color: rgba(255,255,255,.5);
}
.body-content {
  /* background-color: red; */
  width: 700px;
  /* height:500px; */
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.inline-input {
  width: 700px;

}
.sy-result {
  border: 1px dotted rgba(255, 0, 255, 0.32);
  /* text-align: center; */
  width: 658px;
  margin: 50px 0;
  padding: 10px 20px;
}
.syr-ul {
  list-style-type: none;
}
.syo-ol {
  border: 1px dotted rgba(255, 0, 255, 0.32);
  padding: 30px 40px;
}
.syo-ol>li {
  margin-bottom: 20px;
}
.syo-ol>li:hover,
.syr-ul>li:hover {
  color: orange;
  cursor: pointer;
}
</style>
